<template>
	<view class="">
		<view class="binding">
			<!-- 顶部导航栏 -->
			<u-navbar :is-back="false" title="会员认证">
				<view class="slot-wrap x-f" @tap="back">
					<image :src="back_img"></image>
				</view>
			</u-navbar>
            <!-- 认证界面 -->
			<view class="main pf" v-show="!next">
				<view class="title">
					<p>银行卡认证</p>
					<span>请绑定您本人的农商银行卡</span>
				</view>
				<view class="input-box">
					<view class="input ui-1px-b pr">
						<p>身份证</p>
						<input 
                         placeholder="请输入身份证后8位" 
                         v-model="form.id_card" 
                         placeholder-style="color:#999;font-weight: 500; font-size:28rpx" />
					</view>
					<view class="input ui-1px-b pr">
						<p>手机号</p>
						<view class="sms">
							<input type="number" 
                                placeholder="请输入绑定的手机号" 
                                v-model="form.mobile"
                                disabled="disabled"
                                placeholder-style="color:#999;font-weight: 500;font-size:28rpx" />
						</view>
					</view>
				</view>
				<view class="btn tc" @tap.stop="nextStep">
					下一步
				</view>
			</view>
			<!-- 接收短信验证码界面 -->
			<view class="ssg tc" v-show="next">
				<view class="ssg_text">
					已向{{iphone}}的手机发送验证码
				</view>
				<view class="mess_input">
					<u-message-input :maxlength="6" @finish="finish"  :focus="true"></u-message-input>
				</view>
				<view class="ssg_tip">
					请勿将验证码让他人知晓，我行不会以任何形式向您索要验证码
				</view>
			</view>
		</view>
		<bindSuccess ref="bindSuccess"></bindSuccess>
	</view>
	
</template>

<script>
	import bindSuccess from '../components/bind-success/bind-success.vue';
    import { mapState } from 'vuex';
	export default {
		components: {
			bindSuccess
		},
		data() {
			return {
				back_img: this.imgUrl + 'back.png',             // 背景图
				next: false,									// 下一步 - 认证界面切换
                form: {                                         // 表單
                    id_card: '',                                // 身份证后八位
                    mobile: '',                                 // 绑定的手机号码
                },
                iphone: '',                                     // 手机号码后四位
                success: false,                                 // 是否成功
			}
		},
        computed: {
            ...mapState({
                user: state => state.user.user,                  // 会员信息
            })
        },
        mounted() {
            // 将会员手机号赋值给指定内容，阻止认证时输入
            this.form.mobile = this.user.mobile;
            this.iphone = this.form.mobile.substring(this.form.mobile.length - 4);
        },
		methods: {
            /**
             * 请求后端，认证身份证和手机号匹配才通过。
             * 通过完成修改页面样式。 修改样式的同时发送短信验证码。
             * 短信验证码输入结束后请求后台验证
             * 认证完成之后退回上一个页面
             */
			nextStep() {
                if (this.form.id_card.length != 8) {
                    return this.$tools.toast('身份证输入有误,请重新输入');
                }
                this.$api('bankAuthInfo',{
                    card_no: this.form.id_card
                }).then(res => {
                    if (res.status == 1) {
                        this.next = !this.next;
                        this.$tools.toast('验证码已发送');
                    }
                })
            },
            // 返回上级页面
            back() {
                this.$Router.back(1)
            },
            // 验证码输入结束
			finish(e) {
			    // 此处有个api请求 - 用于验证，验证码是否输入正确。
			    // 验证正确的情况下弹出 认证成功，在一秒后隐藏。 执行this.back方法
			    let that = this;
			    this.$api('allowBankAuth',{
			        code: e
			    }).then(res => {
			        if (res.status == 1) {
			            that.$refs.bindSuccess.$data.success = true;
			            setTimeout(() => {
			                that.back();
			            },1000)
			        }
			    })
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
<style>
	page {
		background: #FFF;
	}
</style>
